<template>
    <div class="detail" :style="{height: height}">
        <div class="title">
            <p>{{ detailData.title }}</p>
            <span>发布时间：{{ detailData.create_time | timeFormat("YYYY-MM-DD")}}</span>
            <span>{{ detailData.view }}浏览</span>
            <span>分类：未知</span>

            <ul>
                <li v-for="(item,index) in thumbData" :key="index">
                    <a href="#">
                        <img :src="item.src" alt="">
                    </a>
                </li>
            </ul>

            <!-- 详细内容 -->
            <div class="desc">
                <p v-html="detailData.content"></p>
            </div>
        </div>
        <div class="comment">
            评论
        </div>
    </div>
</template>

<script>
export default {
    name: 'PhotoDetail',
    data(){
        return{
            detailData: {},
            thumbData: [],
            height: document.documentElement.clientHeight - 95 + 'px'
        }
    },
    methods:{
        // 获取图文详细数据
        getDetailData(pid){
            return this.$http.get('/photos/detail/'+pid);
        },
        // 获取缩略图数据
        getThumbData(pid){
            return this.$http.get('/photos/thumb/'+pid);
        }
    },
    created(){
        // 获取当前图文分享的id
        let pid = this.$route.query.id;
        // 并发执行多个请求
        this.$http.all([this.getDetailData(pid),this.getThumbData(pid)]).then(
            this.$http.spread((acct,perms) => {
                // 请求都执行完成后
                console.log(acct);
                console.log('--------')
                console.log(perms);

                this.detailData = acct.data.detail;
                this.thumbData = perms.data.data;
                console.log(this.detailData)
                console.log(this.thumbData)
            })
        )
    }
}
</script>

<style lang="less" scoped>
.detail{
    margin-top: 40px;
    margin-bottom: 40px;
    overflow: hidden;
    overflow-y: auto;
}
.detail .title p{
    font-size: 2rem;
    font-weight: 600;
    color: #0f80ff;
    margin: .5rem 0;
}
.detail .title span{
    padding: .2rem .5rem;
}
.detail desc p{
    font-size: 1.5rem;
    color: #333333;
}
</style>